// 定义产品列表组件
import React from 'react';
import { Ellipsis } from 'antd-mobile';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom'
const MyTitle = styled.div`
   font-size:13px;
   font-weight: bold;

`
const Prolist = (props) => {
    const { prolist } = props

    const formatMoneyFn = (money) => {
        return <span style={{ fontSize: '15px', color: 'red' }}>${money.toFixed(2)}</span>
    }
    // 创建his对象,实现路由的跳转
    const his = useHistory()
    return (
        <ul style={
            {
                display: 'flex',
                flexWrap: 'wrap',
                marginTop: '30px'
            }
        }>
            {
                prolist.map(item => <li
                    key={item.proid}
                    style={{
                        width: '50%'
                    }}
                    onClick={() => {
                        console.log(item.proid)
                        // 跳转路由
                        his.push('/detail/' + item.proid)
                    }}>


                    <img src={item.img1} style={{ width: '100%' }} />
                    <MyTitle>
                        <Ellipsis rows={2} direction='end' content={item.proname}></Ellipsis>
                    </MyTitle>
                    <p>{formatMoneyFn(item.originprice)}</p>
                </li>)
            }
        </ul>
    );
}

export default Prolist;
